import React, { Component } from 'react';
import { Button, Input, InputNumber, Form, Modal } from 'antd'
import styles from './InterestRate.less'
import { connect } from 'dva'

const FormItem = Form.Item;

@connect(({ login }) => ({
  login
}))
class InterestRate extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isEdit: true,
    }
  }


  onHandleSave = () => {
    const { validateFields, getFieldsValue } = this.props.form
    const { welfareItem } = this.props
    validateFields(errors => {
      if (errors) {
        return;
      }
      const data = {
        ...getFieldsValue(),
        id: welfareItem && welfareItem.id
      };

      Modal.confirm({
        title: '确定要修改此项目?',
        okText: '确定',
        cancelText: '取消',
        onOk: () => {
          this.setState({ isEdit: true })
          this.props.onWelfareReviseOk && this.props.onWelfareReviseOk(data);
        },
      });
    });
  }

  onHandleRevise = () => {
    this.setState({ isEdit: false })
  }




  render() {
    const { welfareItem } = this.props
    const { getFieldDecorator } = this.props.form
    const { isEdit } = this.state
    const { isAdmin } = this.props.login
    return (
      <div className={styles.InterestRate}>
        <Form>

        </Form>
        <ul>
          <li>
            <ul>
              <li>福利金日利率</li>
              <li>
                <FormItem >
                  {getFieldDecorator('dayRate', {
                    initialValue: welfareItem && welfareItem.dayRate,
                  })(
                    <InputNumber disabled={isEdit} min={0} max={10} />
                  )}
                </FormItem>
              </li>
              <li>‱</li>
            </ul>
          </li>
          <li>
            <ul>
              <li>用户可取福利金总比率</li>
              <li>
                <FormItem >
                  {getFieldDecorator('maxRate', {
                    initialValue: welfareItem && welfareItem.maxRate,
                  })(
                    <InputNumber min={0} max={10} disabled={isEdit} style={{ width: '50px' }} />
                  )}
                </FormItem>
              </li>
              <li>%</li>
            </ul>
          </li>
          <li>
            <ul>
              <li>提示文字</li>
              <li>
                <FormItem >
                  {getFieldDecorator('tip', {
                    initialValue: welfareItem && welfareItem.tip,
                  })(
                    <Input maxLength="28" style={{ width: '400px' }} disabled={isEdit} />
                  )}
                </FormItem>
              </li>
              <li style={{ color: 'red' }}>最多输入28字</li>
            </ul>
          </li>
        </ul>
        {isAdmin ? <Button type="primary" ghost onClick={isEdit ? this.onHandleRevise : this.onHandleSave}>{isEdit ? "编辑" : "保存"}</Button> : <div></div>}
      </div>
    );
  }
}

export default Form.create()(InterestRate);
